<template>
    <div w50rem h25rem flex="~ col" justify-center items-center bg-dark>
        <div>
            <dv-capsule-chart :config="compoutedConfig" style="width:400px;height:600px;" size="large"/>
        </div>
    </div>
</template>
<script setup>
import { reactive, computed } from 'vue'
import _ from 'lodash'
//由于父组件创建时还没有到onMounted生命周期，会传来一个空对象
const props = defineProps(["datalist"])
console.log(props.datalist);
//使用计算属性可以解决，每次状态改变计算属性会重新计算一遍
const compoutedConfig = computed(() => {
    let {datalist} = props
    console.log('a',datalist);
    //将数组按照company分类
    const groundObj = _.groupBy(datalist,item => item.company)
    //存放需要的数据格式
    const configData = []
    console.log('ground',groundObj);
    for(let item in groundObj){
        configData.push({
            name:item,
            value:groundObj[item].length
        })
    }
    const data = configData.sort((item1,item2)=>item2.value-item1.value).slice(0,7)
    return {
        data:data,
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '人',
        labelNum: 5,
        fontSize:18,
        textColor:'#fff'
    }
})
</script>
<style scoped lang='scss'></style>